{extend name="public:layoutnhq" /}
{block name="title"}{$webConfig['WEBNAME']}-农化圈商品列表页{/block}
{block name="head"}
<script type="text/javascript" src="/public/plugins/timedown/jquery.yomi.js"></script>
{/block}
{block name="body"}
{include file="public/header_nhq"/}
<div class="goods-list-mainbox g-container">
    <div class="left">
        <div class="mc-goods-screen">
            <div class="current">
                <div class="location">
                    <a href="{:url('index/index')}">首页</a>
                    {volist name="location" id="vo"}
                    <a href="{$vo.url}">&gt; {$vo.cat_name}</a>
                    {/volist}
                </div>
                <div class="screen-block">
                    <span class="tit">分类：</span>
                    <span class="con">无机化学,有机化学品,石油化学品</span>
                </div>
                <div class="screen-block">
                    <span class="tit">品牌：</span>
                    <span class="con">麦克林,迈瑞尔,研峰</span>
                </div>
            </div>
            <div class="items">
                <div class="screen-item">
                    <div class="tit">
                        分类
                    </div>
                    <div class="screen-box">
                        <a href="javascript:;" class="item">全部</a>
                        <a href="javascript:;" class="item">无机化学品</a>
                        <a href="javascript:;" class="item">有机化学品</a>
                        <a href="javascript:;" class="item">石油化学品</a>
                    </div>
                </div>
                {notempty name='brandList'}
                <div class="screen-item">
                    <div class="tit">
                        品牌
                    </div>
                    <div class="screen-box">
                        <a href="javascript:;" class="item">全部</a>
                        {volist name="brandList" id="vo"}
                    		<a class="item" href="javascript:;" {in name='vo.brand_id' value='$Request.param.brand'}class='active'{/in} data-value="{$vo.brand_id}" data-type='brand'>{$vo.brand_name}</a>
                    	{/volist}
                    </div>
                    <div class="screen-checkbox mc-avg-6 avg-margin-10">
                    	{volist name="brandList" id="vo"}
                    		<a class="item" href="javascript:;" {in name='vo.brand_id' value='$Request.param.brand'}class='active'{/in} data-value="{$vo.brand_id}" data-type='brand'>{$vo.brand_name}</a>
                    	{/volist}
                    	{volist name="brandList" id="vo"}
                        <label class="item">
                        	<input type="checkbox" value="" class="checkclass" name="screen_name" {in name='vo.brand_id' value='$Request.param.brand'}class='active'{/in} data-value="{$vo.brand_id}" data-type='brand' />{$vo.brand_name}
                        </label>
                        {/volist}
                        <div class="f-cb"></div>
                        <div class="action">
                            <a href="javascript:;" class="action-btn confirm">确定</a>
                            <a href="javascript:;" class="action-btn cancel">取消</a>
                        </div>
                    </div>
                    <a href="javascript:;" class="select-more">多选</a>
                </div>
                {/notempty}
                {volist name="itemSearchList" id="vo"}
                <div class="screen-item">
                    <div class="tit">
                        {$vo.item_name}
                    </div>
                    <div class="screen-box">
                    	{volist name="vo.value" id="val"}
                    		<a class="item" href="javascript:;" {in name='vo.brand_id' value='$Request.param.brand'}class='active'{/in} data-value="{$vo.brand_id}" data-type='brand'>{$val}</a>
                    	{/volist}
                    </div>
                    <div class="screen-checkbox mc-avg-6 avg-margin-10">
                    	{volist name="brandList" id="vo"}
                        <label class="item">
                        	<input type="checkbox" value="" class="checkclass" name="screen_name2" {in name='vo.brand_id' value='$Request.param.brand'}class='active'{/in} data-value="{$vo.brand_id}" data-type='brand' />{$vo.brand_name}
                        </label>
                        {/volist}
                        <div class="f-cb"></div>
                        <div class="action">
                            <a href="javascript:;" class="action-btn confirm">确定</a>
                            <a href="javascript:;" class="action-btn cancel">取消</a>
                        </div>
                    </div>
                    <a href="javascript:;" class="select-more">多选</a>
                </div>
                {/volist}
            </div>
        </div>
        <div class="mc-sort-box">
            <div class="sort-action">
                <!--好像综合和销量没有升序的需求，只按照降序来排-->
                <a href="javascript:;" class="sort-btn {eq name="$_POST['p1']" value="goods_sort"}order-active{/eq}" data-value="goods_sort">综合排序</a>
                <a href="javascript:;" class="sort-btn {eq name="$_POST['p1']" value="goods_sale_number"}order-active{/eq}" data-value="goods_sale_number">销量排序</a>
                <!--价格升序样式asc 降序样式desc-->
                <a href="javascript:;" class="sort-btn active asc {eq name="$_POST['p1']" value="market_price"}order-active{/eq}" data-value="market_price">价格排序 <span class="iconfont icon-sanjiaojiantoutriangular"></span></a>
            </div>
            <label for="stock" class="stock"><input type="checkbox" id="stock"> 现货</label>
            <form class="pure-form mu-form">
                <div class="pure-control-group">
                    <label class="group-tit" class="group-tit">价格区间</label>
                    <input type="text" name="consignee" placeholder="">
                    <span class="spill">-</span>
                    <input type="text" name="consignee" placeholder="">
                    <button type="submit" class="pure-button pure-button-default">确定</button>
                </div>
            </form>
            <div class="total-info">
                总计<span class="num">1002</span>商品
            </div>
        </div>
        <div class="goods-list mc-avg-4 avg-margin-10">
            {volist name=":goods_list(0, 0, 100)" id="vo"}
            <div class="item">
                <div class="mc-goods-item2">
                    <a href="{$vo.url}" class="link"></a>
                    <div class="img-thumb">
                        <img src="{$vo.goods_thumb}" alt="">
                    </div>
                    <div class="goodsname">
                        {$vo.fulltitle}
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">{$vo.simple_price}</b>/{$vo.goods_unit}
                    </div>
                     <div class="goods-list-action">
                        <a href="javascript:;" class="btn"><span class="iconfont icon-iconfontsvg14"></span> 加入收藏</a>
                        <a href="javascript:;" class="btn"><span class="iconfont icon-jiarugouwuche"></span> 加入购物车</a>
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
    <div class="right">
        <div class="row">
            <div class="row-tit">
                热销产品
            </div>
            <div class="row-main">
            	{volist name=":goods_list(0, 0, 6, 'is_commend=1')" id="vo"}
		            <div class="mc-goods-item4">
	                    <a href="{$vo.url}" class="link"></a>
	                    <div class="img-thumb">
	                        <img src="{$vo.goods_thumb}" alt="">
	                    </div>
	                    <div class="goodsname">
	                        {$vo.fulltitle}
	                    </div>
	                    <div class="pricebox">
	                        ￥<b class="goods-price">{$vo.simple_price}</b>/{$vo.goods_unit}
	                    </div>
	                </div>
            	{/volist}
            </div>
        </div>
    </div>

</div>
{include file="public/footer"/}
{/block}
{block name="script"}
<script type="text/javascript">
   $(function () {
       /*循环筛选项，超出一行设置隐藏，加展开按钮*/
       $('.screen-box').each(function () {
           var height=$(this).height();
           var html='<a href="javascript:;" class="screen-item-more"><span class="iconfont icon-sanjiaojiantoutriangular"></span></a>';
           if(height>24){
               $(this).addClass('item-hidden');
               $(this).after(html);
           }
       });
   });
   /*展开按钮单击事件*/
   $(document).on('click', '.screen-item-more', function(e){
       var obj=$(this).prev();
       if($(this).hasClass("rotate")){
           $(this).removeClass('rotate');
           obj.addClass('item-hidden');
       }else{
           $(this).addClass('rotate');
           obj.removeClass('item-hidden');
       }
   })
    /*多选单选切换*/
    $('.select-more').click(function () {
        var text=$(this).text();
        var obj=$(this).parent('.screen-item');
        if(text=='多选'){
            /*先隐藏其他多选框*/
            $('.screen-box').show();
            $('.screen-checkbox').hide();
            $('.select-more').empty().text('多选')
            /*隐藏当前单选，显示当前多选*/
            obj.find('.screen-box').hide();
            obj.find('.screen-checkbox').show();
            $(this).empty().text('单选');
        }else{
            obj.find('.screen-box').show();
            obj.find('.screen-checkbox').hide();
            $(this).empty().text('多选');
        }
    })
</script>
{/block}
